<template>
  <div class="upResources">
    <div class="upResourcesBox">
      <div class="hideTit">
        上传资源
        <a class="closext" @click="cancelUpload"></a>
      </div>
      <div class="content">
        <ul>
          <li>
            <label class="row-title"><b class="must-fill-in">*</b>标题：</label>
            <input placeholder="请填写标题，不超过30个字" type="text" v-model="title" @blur="checkTitle" maxlength="30"/>
          </li>
          <li>
            <label class="row-title">标签：</label>
            <div class="key_inputBox clearfix" @click="">
              <span class="tag_tx" v-for="item, index in arrInputTags">
                {{item}}
                <ins class="delkey" @click="deleteInputTag(index)">×</ins>
              </span>
              <input class="keywordipt" type="text" placeholder="输入完毕后按回车键"
                     @keyup.enter="enterNewTag" v-model="tempTag" @focus="isShowRecoTags = true;">
            </div>
            <div class="keyTips" v-show="isShowRecoTags">
              <ins class="closeTips" @click="isShowRecoTags = false;">×</ins>
                <div class="keyTipcon">
                  <!--<p>常用关键词：</p>-->
                  <span class="tag_set"
                        v-for="item, index in arrRecoTags" @click="arrInputTags.push(item)">{{item}}</span>
                </div>
            </div>
          </li>
          <li>
            <label class="row-title">
              公开范围：
            </label>
            <div class="radsel">
<!--              <label><input name="openlevel" type="radio" value="3" v-model="openlevel"/>集团校内公开</label>-->
<!--              <label><input name="openlevel" type="radio" value="2" v-model="openlevel"/>本校区内公开</label>-->
              <label><input name="openlevel" type="radio" value="1" v-model="openlevel"/>本备课组公开</label>
              <label><input name="openlevel" type="radio" value="0" v-model="openlevel"/>私有</label>
            </div>
          </li>
          <li>
            <label class="row-title">
              下载权限：
            </label>
            <div class="radsel">
              <label><input name="isdownload" type="checkbox" v-model="isdownload"/>允许下载</label>
            </div>
          </li>
        </ul>
      </div>
      <div class="hideBtn">
        <a class="btnSure" @click="confirmUpload">确认</a>
        <a class="btnCancel" @click="cancelUpload">取消</a>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "editUpload",
    props: {
      defaultTitle: {
        type: String,
        default: ""
      },
      defaultData: {
        type: String,
        default: null
      }
    },
    data(){
      return {
        title: '', // 标题
        openlevel: '1', // 公开范围 3集团校 2本校区 1备课组 0私有
        isdownload: false, // 下载权限 默认不允许下载
        arrInputTags: [], // 用户输入的标签数组
        tempTag: '', // 用户暂时输入的标签
        rescode: '', // 资源code 编辑的时候需要
        isShowRecoTags: false, // 是否展示标签推荐
        arrRecoTags: [], // 推荐标签数组
      }
    },
    computed: {},
    watch: {},
    methods: {
      /**
       * 取消上传
       */
      cancelUpload(){
        this.$emit('cancel-upload', false);
      },
      /**
       * 确认上传
       */
      confirmUpload(){
        let title = this.title.trim();
        if(!title){
          return this.globalShowMsg({msg: "标题不能为空或全空格！", type: "warning"});
        }
        if(this.specialCharCheck(title)){
          return this.globalShowMsg({msg: "标题名称不能包含特殊字符：$*<>`~^|/\\", type: 'warning'});
        }
        let transData = {
          title,
          tags: Array.from(new Set(this.arrInputTags)).join(";") || '', // 用set数组去重
          openlevel: this.openlevel,
          isdownload: this.isdownload ? 1 : 0,
          rescode: this.rescode
        };
        this.$emit('exec-upload', transData);
      },
      /**
       * 添加标签
       */
      addTag(){

      },
      /**
       * 删除用户在input里输入的标签
       * @param index 当前要删除的标签在arrInputTags中的位置
       */
      deleteInputTag(index){
        this.arrInputTags.splice(index, 1);
      },
      /**
       * 回车确认一个新标签
       */
      enterNewTag(){
        let tag = this.tempTag.trim();
        if(!tag){
          return this.tempTag = "";
        }
        if(this.specialCharCheck(tag)){
          return this.globalShowMsg({msg: "标签名称不能包含特殊字符：$*<>`~^|/\\", type: 'warning'});
        }
        if(tag.length > 10){
          return this.globalShowMsg({msg: "每个标签最多10个字符", type: 'warning'});
        }
        // 规则验证通过
        this.arrInputTags.push(tag);
        this.tempTag = "";

      },
      /**
       * 检查标题
       */
      checkTitle(){
        let title = this.title.trim();``
        if(this.specialCharCheck(title)){
          this.globalShowMsg({msg: "标题名称不能包含特殊字符：$*<>`~^|/\\", type: 'warning'});
        }
      },
      /**
       * 获取推荐的标签
       */
      getRecoTags(){
        let url;
        if (process.env.NODE_ENV === "development") {// 开发阶段绕过限制
          url = `/corsWithHeader/help/LcEdu/keywords`;
        } else {
          url = globalVar.cnkiFullTextAddr + "/help/LcEdu/keywords";
        }
        axios.get(url, {
          headers: {
            'token': dataFromFather.token
          }
        }).then(res => {
          if(res && res.data && res.data.Code === 200){
            let rawArr = res.data.Keywords || []
              , endArr = [];
            for (let item of rawArr) {
              endArr.push(item.keyword);
            }
            this.arrRecoTags = endArr;
          }else{
            this.globalShowMsg({msg: '查询推荐关键词出错，请重试！'});
          }
        }).catch(err => {
          console.log(err);
          this.globalShowMsg({msg: '查询推荐关键词出错，请重试！'});
        })
      }
    },
    created(){},
    mounted(){
      this.title = this.defaultTitle;
      if(this.defaultData){
        let obj = JSON.parse(this.defaultData);
        this.arrInputTags = obj.arrInputTags;
        this.openlevel = obj.openlevel;
        this.isdownload = obj.isdownload;
        this.title = obj.title;
        this.rescode = obj.rescode;
      }
      this.getRecoTags();
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/editUpload.css";
</style>
